import React, {Component} from 'react'
import {
    View,
    StyleSheet,
    Image,
    Text,
    TouchableOpacity
} from 'react-native'
import Layer from "src/components/Layer"
import {deviceWidth} from "src/util"
import navigationhelper from 'src/components/navigationhelper'


const data = [
    {
        icon: require('src/assets/mine/bill.png'),
        title: '还款记录',
    },
    {
        icon: require('src/assets/mine/card.png'),
        title: '卡片管理',
    }
]

export default class CenterButtons extends Component<{}> {
    render() {
        return (
            <View style={[styles.itemList, this.props.style]}>
                {
                    data.map(function (item, index) {
                        return <RenderItem key={index} item={item} action={() => {
                            if(index == 0){
                                navigationhelper.navigate('RepaymentRecord')
                                // navigationhelper.navigate('MyTeamNewHomePage')
                            }
                           else if(index == 1){
                                navigationhelper.navigate('CardManagerHomePage')
                                // navigationhelper.navigate('RepaymentRecord')
                            }
                            else{
                                navigationhelper.navigate('CardManagerHomePage')
                            }
                            // Layer.showMsg(index)
                        }}/>
                    })
                }
            </View>
        )
    }
}

// 中间的小按钮
function RenderItem (props) {
    return (
        <TouchableOpacity
            style={styles.itemButton}
            onPress={props.action}
            changeOpacity>
            <Image
                style={{ width: 64, height: 58 }}
                source={props.item.icon} />
            <Text style={{ fontSize: 13, lineHeight: 26,  color: '#2E2E2E', fontFamily: 'PingFang SC', marginTop: 3 }}>{props.item.title}</Text>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    itemButton: {
        justifyContent: 'space-between',
        alignItems: 'center',
        width: (deviceWidth - 32) / 2,
        height: 73,
        marginTop: 16
    },
    itemList: {
        flexDirection: 'row',
        // flexWrap: 'wrap',
        height: '100%',
        marginBottom:20,
     // width: deviceWidth - 32
    }

})